import React, {Component} from 'react';
import {ThemesContext} from "./ButtonContext";
import ThemeButton from "./ThemeButton";
import theme from "../../theme";

class Demo2 extends Component {
    state ={
        theme:theme.light
    }

    handleButton =()=>{
        this.setState({theme:this.state.theme === theme.light? theme.dark:theme.light})

    }

    render() {
        return (
            <div>
                <ThemesContext.Provider value={this.state.theme}>
                       <NavBar handleTheme={this.handleButton}/>
                </ThemesContext.Provider>

            </div>
        );
    }
}

export default Demo2;

function NavBar(props){
  return  <ThemeButton onClick={props.handleTheme}/>
}